<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<th:block th:include="include :: header('新增班次')"/>
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-plan-add">
			<div class="form-group">
				<label class="col-sm-3 control-label">班次名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="planName" id="planName" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">颜色：</label>
				<div class="col-sm-8" style="display: flex">
					<input class="form-control" style="width: 75%;" type="text" name="color" id="color" v-model="colorInfo" placeholder="请选择颜色" required>
					<input type="color" style="width: 25%;height: 34px" v-model="colorInfo">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">显示顺序：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="defineType" id="defineType" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">班次类型：</label>
				<div class="col-sm-8">
					<select name="planType" id="planType" class="form-control">
						<option value="1">白班</option>
						<option value="2">夜班</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">起止时间：</label>
				<div class="col-sm-8" style="display: flex;justify-content: space-between;align-items: center">
					<input class="form-control" style="width: 45%" type="time" v-model="startTime" @change="changeTime" required>
					<span>-</span>
					<input class="form-control" style="width: 45%" type="time" v-model="endTime" @change="changeTime" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">总时间（小时）：</label>
				<div class="col-sm-8">
					<input class="form-control" type="hidden" name="periodTime" id="periodTime" v-model="periodTime">
					<input class="form-control" type="text" name="totalTime" id="totalTime" v-model="totalTime">
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer"/>
	<script type="text/javascript">
		var prefix = ctx + "planset";

		var app = new Vue({
			el: '.wrapper',
			data: {
				colorInfo: '',
				startTime: '00:00',
				endTime: '00:00',
				periodTime: '',
				totalTime: ''
			},
			methods: {
				changeTime: function(){
					this.periodTime = this.startTime + "-" + this.endTime;
					var startH = this.startTime.split(':')[0];
					var startM = this.startTime.split(':')[1];
					var endH = this.endTime.split(':')[0];
					var endM = this.endTime.split(':')[1];
					if(endH < startH){
						endH = parseInt(endH) + 24;
					}
					var start = parseInt(startH) * 60 + parseInt(startM);
					var end = parseInt(endH) * 60 + parseInt(endM);
					this.totalTime = (end - start) / 60;
				}
			}
		})

		$("#form-plan-add").validate({
			rules: {
				onkeyup: false,
				planName: {
					required: true
				},
				color: {
					required: true
				},
				defineType: {
					required: true
				},
				planType: {
					required: true
				},
				startTime: {
					required: true
				},
				endTime: {
					required: true
				}
			},
			focusCleanup: true
		});
		
		function submitHandler(){
	        if($.validate.form()){
	        	$.operate.save(prefix + "/insert", $('#form-plan-add').serialize());
	        }
	    }
	</script>
</body>
</html>
